Add plain vs range syntax section to container queries guide#44014
Add plain vs range syntax section to container queries guide#44014
Conversation
github-actions
Bot
added
Content:CSS
|
@nchevobbe let me know if it fully covers the feature |
|
Preview URLs (2 pages)
Flaws (12) Note! 1 document with no flaws that don't need to be listed. 🎉 Found an unexpected or unresolvable flaw? Please report it here. URL:
(comment last updated: 2026-05-06 06:15:52) |
I think so, at least it definitely helps understanding the differences |
|
Yeah, this looks good - Only nitpick is the naming of the equality syntax. At least to me, at a glance, Technically it's |
|
@dshin-moz good point! It’s much clearer with plain vs range now and directly attached to the spec. Thanks! |
pepelsbey
changed the title
|
|
||
| The global `revert` and `revert-layer` are invalid as values in a `<style-feature>` and cause the container style query to be false. | ||
|
|
||
| #### Plain (`:`) versus range (`=`) syntax |
There was a problem hiding this comment.
Consider doing all as below. I see the point of comparing the two you have because they look similar and I guess doing = will be a gotcha. But in most cases you'll likely us this as an actual range - so > is far more likely.
| #### Plain (`:`) versus range (`=`) syntax | |
| #### Plain (`:`) versus range (`=`,`<`, `<=`, `>`, `>=`) syntax |
There was a problem hiding this comment.
OK, having read the guide now, I'd be tempted to call this range syntax, make it mostly about range syntax, and expand it out with some of the information in the guide.
This focuses currently on the comparision of the forms - but I see this as the reference which needs to mostly talk about what range syntax is, not how it compares.
Specifically
- The material in "To evaluate this form, the "
- The point that there is a syntax with three values. MORE important, make it clear that they don't evaluate in a daisy chain, which I just assumed.
- I'd keep the comparsion as a gotcha example. It is useful.
Thoughts?
| - `style(--n = 3)` (range) parses both sides as a number, length, percentage, etc., and compares numerically. With the same `--n: calc(6/2)`, `style(--n = 3)` is true. The range syntax also supports `<`, `<=`, `>`, `>=`, three-value intervals such as `style(0 < --n < 10)`, and flexible operand ordering. | ||
|
|
||
| For the full rules and more examples, see [Plain versus range syntax in style queries](/en-US/docs/Web/CSS/Guides/Containment/Container_size_and_style_queries#plain_versus_range_syntax_in_style_queries) in the container style queries guide. | ||
|
|
There was a problem hiding this comment.
@pepelsbey @dletorey Can you guys co-ordinate. I just reviewed a section on this topic in #44003
-
FYI, the problem I raised with that PR is that this section is in "examples" but the content of all these examples is actually guide. Arguably all of this should be in a description. Possibly to much restructure for now.
-
That PR didn't include a proper guide. This is better, but you might want to take the example from the other PR into this.
-
The range syntax isn't a CSS declaration as I undersand it, from the sentence in previous section "The parameter of each
style()is a single<style-feature>. A<style-feature>is a valid CSS declaration, a CSS property, or a<custom-property-name>.".- Whatever it is, we should forward reference earlier and link down here - i.e. make it clear earlier that there are effectively "boolean" comparision on computed values and range comparsion on numerical values.
-
The range syntax has implications also in that it compares numbers, so presumably if you compare a property like
color: redto a range it might be meaningless - I'm not sure how that would coerce either.Minimally it is worth noting here what the intent is - i.e. why it was added and where you can/cannot use it.
There was a problem hiding this comment.
PS See my comments on th intro https://github.com/mdn/content/pull/44014/changes#r3206101519
Most of this is still valid. If you make it more about the range and less about the comparion of forms this should just work.
| > [!NOTE] | ||
| > When declaring custom properties, consider using `@property` with the {{cssxref("@property/syntax","syntax")}} descriptor so the browser can properly compare computed values. | ||
|
|
||
| ### Plain versus range syntax in style queries |
There was a problem hiding this comment.
This is all great. I'd argue a little of it should go in the reference, but even if it did it should all stay here too.
|
@hamishwillee I would wait for @dletorey’s PR to be merged (it’s more time-sensitive) and get back to it then, addressing your feedback, etc. |
5 participants
Description
Documents the difference between the
:(plain) and=(range) forms ofstyle()in container style queries:@containerreference linking to the guide.Motivation
To clear the difference between
style(--n: 3)andstyle(--n = 3).Additional details
if()by Temani Afif.